<template>
  <div id="detail">
    <detail-nav-bar @titleClick="titleClick" class="detail-nav" ref="nav"></detail-nav-bar>

    <scroll :probe-type="3" @scroll="contentScroll" class="detail-wrapper" ref="scroll">
      <detail-swiper :top-images="topImages"></detail-swiper>
      <detail-base-info :goods="goods"></detail-base-info>
      <detail-shop-info :shop="shop"></detail-shop-info>
      <detail-goods-info :detail-info="detailInfo" @imageLoad="detailImageLoad"></detail-goods-info>
      <detail-param-info :param-info="paramInfo" ref="params"></detail-param-info>
      <detail-comment :comment-info="commentInfo" ref="comment"></detail-comment>
      <goods-list :goods="recommends" ref="recommend"></goods-list>
    </scroll>

    <DetailBottomBar/>
    <back-top @click.native="backTopClick(0,0,500)" v-show="isShowBackTop"></back-top>

  </div>
</template>

<script>
    import DetailNavBar from "./child/DetailNavBar";
    import DetailSwiper from "./child/DetailSwiper";
    import DetailBaseInfo from "./child/DetailBaseInfo";
    import DetailShopInfo from "./child/DetailShopInfo";
    import DetailGoodsInfo from "./child/DetailGoodsInfo";
    import DetailParamInfo from "./child/DetailParamInfo";
    import DetailComment from "./child/DetailComment";
    import Scroll from "components/scroll/Scroll";
    import GoodsList from "components/goods/GoodsList";
    import DetailBottomBar from "./child/DetailBottomBar";

    import {getDetail, Goods, Shop, GoodsParam, getRecommend} from 'network/detail';
    import {itemListenerMixin, backTopMixin} from "common/mixin";
    import {debounce} from "../../common/utils";

    export default {
        name: "Detail",
        components: {
            DetailNavBar,
            DetailSwiper,
            DetailBaseInfo,
            DetailShopInfo,
            Scroll,
            DetailGoodsInfo,
            DetailParamInfo,
            DetailComment,
            GoodsList,
            DetailBottomBar
        },
        mixins: [itemListenerMixin, backTopMixin],
        data() {
            return {
                iid: null,
                topImages: [],
                goods: {},
                shop: {},
                detailInfo: {},
                paramInfo: {},
                commentInfo: {},
                recommends: [],
                themeTopYs: [],
                getThemeTopY: null,
            }
        },
        mounted() {

        },
        created() {
            // 根据id获取商品数据
            this.iid = this.$route.params.iid;
            getDetail(this.iid).then(res => {
                const data = res.result;
                // 顶部图片轮播数据
                this.topImages = data.itemInfo.topImages;
                this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services);
                this.shop = new Shop(data.shopInfo);
                this.detailInfo = data.detailInfo;
                this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);
                if (data.rate.cRate !== 0) {
                    this.commentInfo = data.rate.list[0];
                }
            });
            getRecommend().then(res => {
                this.recommends = res.data.list;
            });

            this.getThemeTopY = debounce(() => {
                this.themeTopYs = [];
                this.themeTopYs.push(0);
                this.themeTopYs.push(this.$refs.params.$el.offsetTop);
                this.themeTopYs.push(this.$refs.comment.$el.offsetTop);
                this.themeTopYs.push(this.$refs.recommend.$el.offsetTop);
                this.themeTopYs.push(Number.MAX_VALUE);
                console.log(this.themeTopYs);
            }, 100)
        },
        methods: {
            detailImageLoad() {
                this.$refs.scroll.refresh();
                this.getThemeTopY();
            },
            titleClick(index) {
                this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 200);
            },
            contentScroll(position) {
                const positionY = -position.y;
                // 让positionY和themeTopY的区间比较，修改index
                const len = this.themeTopYs.length;
                for (let i = 0; i < len - 1; i++) {
                    if (
                        this.currentIndex !== i &&
                        positionY > this.themeTopYs[i] &&
                        positionY < this.themeTopYs[i + 1]
                    ) {
                        this.currentIndex = i;
                        this.$refs.nav.currentIndex = this.currentIndex;
                    }
                }
                this.isShowBackTop = -position.y > 1000;
                // this.isTabFixed = -position.y > this.tabOffsetTop;
            }
        },
        destroyed() {
            // 取消全局事件的监听。参数为 取消的事件及事件对应的函数
            this.$bus.$off('itemImgLoad', this.itemImgListener)
        }
    }
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 9;
    background-color: #fff;
    height: 100vh;
  }

  .detail-nav {
    position: relative;
    z-index: 9;
    background-color: #fff;
  }

  .detail-wrapper {
    height: calc(100vh - 44px - 49px);
    overflow: hidden;
  }
</style>
